﻿

<div id="app">
    <el-button type="danger" v-on:click="del">批量删除</el-button>
    <el-button type="primary"  v-on:click="add" >添加</el-button>

    <el-table :data="tableData"
              style="width: 100%"
              v-on:selection-change="handleSelectionChange">
        <el-table-column type="selection"
                         width="55">
        </el-table-column>
        <el-table-column prop="name"
                         label="商品名称"
                         width="180">
        </el-table-column>
        <el-table-column prop="price"
                         label="商品价格"
                         width="180">
        </el-table-column>
        <el-table-column prop="picUrl"
                         label="商品图片"
                         width="180">
            <template slot-scope="scope">
                <img :src="'https://localhost:5001/'+ scope.row.picUrl" style="width:100px" />
            </template>
        </el-table-column>
        <el-table-column prop="status"
                         label="商品状态">
            <template slot-scope="scope">
                <span>{{ scope.row.status==1?'上架':'下架' }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini"
                           v-on:click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini"
                           type="danger"
                           v-on:click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="block">
        <el-pagination v-on:size-change="handleSizeChange"
                       v-on:current-change="handleCurrentChange"
                       :current-page="pageIndex"
                       :page-sizes="[2, 4, 6, 8]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
    </div>
</div>


<script>
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                tableData: [],  //表格数据
                pageIndex:1,
                pageSize: 2,
                proName: '',
                tid: 0,
                total:0,

                multipleSelection:[], //处理全选的值
            }
        },
        mounted() {
            this.show(); //加载
        },
        methods: {
            add() {
                location.href = '/Products/add';
            },
            show() {
                console.log("加载数据");

                axios({
                    url: 'https://localhost:5001/api/Product/GetList',
                    method: 'get',
                    params: {
                        pageIndex: this.pageIndex,
                        pageSize: this.pageSize,
                        proName: this.proName,
                        tid: this.tid
                    }
                }).then((res) => {
                    //也可以从console.log里面去赋值
                    console.log(res.data);

                    this.tableData = res.data.data;  //打开swagger复制过来
                    this.total = res.data.totalCount;//打开swagger复制过来
                });
            },
            handleSelectionChange(val) { //处理全选、反选
                this.multipleSelection = val;

                console.log("处理全选、反选");
                console.log(this.multipleSelection);
            },
            del() {
                console.log("批量删除");
                var ids = this.multipleSelection.map(x => x.pId);
                alert(ids.toString());
            },
            handleSizeChange(val) {
                console.log("页容量发生变化");
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.show();
            },
            handleCurrentChange(val) {
                console.log("当前页发生变化");
                console.log(`当前页: ${val}`);
                this.pageIndex = val;
                this.show();
            },
            handleEdit(index, row) {
                console.log("进入编辑功能");
                console.log(index, row);

                //跳转到编辑页面
                location.href = "/Products/Edit?id=" + row.pId;

            },
            handleDelete(index, row) {
                console.log("进入单删功能");
                console.log(index, row);

                if (confirm("是否确定删除")) { //这个5分不要丢
                    //axios调用

                }
                
            }
        }


    });
</script>
